<template>
  <router-view />
</template>

<script setup lang="ts"></script>

<style lang="stylus">
#app {
  //font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  position relative
  //width 100%
  //height 100%
  background-color rgba(246, 247, 248, 0.5)
  font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol;
}

.vam{ vertical-align: middle;}
.mb20{ margin-bottom: 20px}
.mb10{ margin-bottom: 10px}
.mb5{ margin-bottom: 5px}
.mb2{ margin-bottom: 2px}


.pl30{ padding-left: 30px}

</style>



<style lang="stylus">
.dialogWrap{
  margin-bottom:0

  .el-dialog__header{
    padding-top: 10px
    .el-dialog__headerbtn{
      top: 0
      height: 50px;
      i{
        font-size:32px
      }
    }
  }

  .el-dialog__body{
    border: 1px solid #e2e2e2
    padding: 0
  }
  .el-dialog__footer{
    padding: 10px 5px
  }
}

.menuPopover{
  //height: 500px
  height: calc(100vh - 220px);
  overflow-y: scroll;

  .isSubTit{
    position: relative;
    padding: 5px
    border-style: solid;
    border-color: #fff
    border-width: 2px 0 2px 4px;
    cursor: pointer;


    &:hover{
      border-left: 4px solid #408020
      background-color: rgba(154, 255, 102, 0.1)
    }
    &+.isSubTit::before{
      content " "
      position: absolute
      top: -3px
      left: 0
      height:1px
      width: 100%
      background-color: #e2e2e2

    }
  }
}


.homePage{
  padding 10px 10px 50px

  .menu{
    position: fixed;
    bottom: 32px;
    right 32px;
    z-index: 9;

    .btnJump{
      margin-right: 10px
      display: inline-block;
      padding: 0 8px
      height: 32px
      line-height:32px
      border: 1px solid #109b8a
      background-color: #fff
      cursor: pointer;
      box-shadow 0 0 5px rgba(16, 155, 138, 0.5)
      -webkit-border-radius: 3px
      -moz-border-radius: 3px
      border-radius: 3px
      font-size:16px
    }

    .icon{
      display: inline-block;
      position: relative
      width: 32px
      height: 32px
      border: 1px solid #109b8a
      background-color: #fff
      cursor: pointer;
      box-shadow 0 0 5px rgba(16, 155, 138, 0.5)
      -webkit-border-radius: 3px
      -moz-border-radius: 3px
      border-radius: 3px

      &::before,
      &::after{
        content ' '
        position: absolute
        left:3px
        right:3px
        height: 1px
        background-color: #109b8a

        transition: .2s ease-in-out;

      }
      &::before{
        top:10px
      }
      &::after{
        bottom: 10px
      }

      &.popoverVisible{
        &::before{
          top:15px
          transform: rotate(45deg);
        }
        &::after{
          bottom: 15px
          transform: rotate(-45deg);
        }
      }
    }
  }

  .info{
    padding:5px 10px
    -webkit-border-radius: 3px
    -moz-border-radius: 3px
    border-radius: 3px

    color: #67c23a
    background-color: #f0f9eb
    border: 1px solid #67c23a
  }

  .iframe{
    border: 0 none
    width:100%
    height: calc(100vh - 130px);
  }

  .wdSign{
    position: relative;
    display: inline-block;
    padding: 5px 15px
    cursor: pointer;
    border: 1px solid rgba(16, 155, 138, 0.25)
    transition: .2s ease-in-out;

    -webkit-border-radius: 5px
    -moz-border-radius: 5px
    border-radius: 5px

    &:hover{
      //background-color: rgba(16, 155, 138, 0.1)
      border: 1px solid #109b8a
      box-shadow 0 0 10px rgba(124, 255, 238, 0.5)
    }

    &+.wdSign{
      margin-left: 3px
    }

    span{
      -webkit-touch-callout:none; /*系统默认菜单被禁用*/
      -webkit-user-select:none; /*webkit浏览器*/
      -khtml-user-select:none; /*早起浏览器*/
      -moz-user-select:none; /*火狐浏览器*/
      -ms-user-select:none; /*IE浏览器*/
      user-select:none; /*用户是否能够选中文本*/
    }
  }
}
</style>

